<template>
    <div class="logo">
        <div class="floa_left">
            <img v-if="systemStyle ==='fluctuate' " :src="homePageLucentLogoUrl"/>
            <img v-else :src="homePageLogoUrl"/>
        </div>
        <div class="logo-head" >
            <!--      标题-->
            <div class="floa_h1">
                <h3 v-if="systemStyle ==='fluctuate'" style="color: #FFFFFF">
                    {{ homePageTitle }}</h3>
                <h3 v-else>{{ homePageTitle }}</h3>
            </div>
        </div>

    </div>


</template>

<script>
import SysSiteSettingApi from '@/api/system/core/sysSiteSetting';
import SysPropertiesApi from '@/api/system/core/sysProperties';
import {Util,TokenUtil} from "@lowcode/jpaas-common-lib";
import {mapState} from "vuex";

export default {
    name: 'Logo',

    data() {
        return {
            homePageTitle: '',
            //默认logo
            homePageLogoUrl: process.env.BASE_URL + 'image/log.png',
            //默认透明logo
            homePageLucentLogoUrl: process.env.BASE_URL + 'image/logo_white.png'
        }
    },
    computed: {
        ...mapState({
            sideBar_Background: (state) => state.appSetting.sideBar_Background,
            systemStyle: (state) => state.appSetting.systemStyle,
            background: (state) => state.appSetting.background,
            collapsed: (state) => state.appSetting.collapsed,
        })
    },
    created() {
        let self = this;
        this.getConfig();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "toolsLang", key);
        },
        getConfig() {
            let self_ = this;
            SysSiteSettingApi.getConfig().then((res) => {
                if (res.success) {
                    if (res.data) {
                        let data = res.data;

                        if (!data.confs) {
                            return;
                        }

                        let confs = JSON.parse(data.confs);
                        this.homePageTitle = self_.$i18(confs.homePageTitle, '敏捷开发平台');

                        if (confs.homePageLogo) {
                            this.homePageLogoUrl = this.getFilePath(confs.homePageLogo);
                        }

                        if (confs.homePageLucentLogo) {
                            this.homePageLucentLogoUrl = this.getFilePath(confs.homePageLucentLogo);
                        }
                    }
                }
            })
        },
        getFilePath(fileId) {
            let token = TokenUtil.getToken();
            fileId = Util.encryptWord(fileId);
            return "/api/api-system/system/core/sysFile/previewFile?fileId=" + fileId + "&accessToken=" + token;
        }
    },

}
</script>
<style scoped>
.logo-head {
    position: relative;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.logo-head div:nth-child(2) span {
    font-size: 10px;
    color: white;
    opacity: .4;
}

.floa_left {
    margin-right: 10px;
    width: 30px;
    height: 30px;
}
.floa_left img {
    width: 100%;
}
.logo h3 {
    font-size: 18px;
    background: transparent;
    color: #fff;
    white-space: nowrap;
    margin-bottom: 0px;
    text-overflow: ellipsis;
    overflow: hidden;

}

.logo {
    display: flex;
    padding: 0 18px;
    align-items: center;
    height: 100%;
    overflow: hidden;
}




</style>